<template>
  <div class="wrapper-reg">
    <div class="reg-page">
      <Progress :current="currentStep" />
      <div class="reg-content">
        <component :is="comp" @on-next="onNext" @on-last="onNext" />
      </div>
    </div>
    <div class="h-30px"></div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import Progress from './components/Progress.vue';
import Step1 from './components/Step1.vue';
import Step2 from './components/Step2.vue';
import Step3 from './components/Step3.vue';
import Step4 from './components/Step4.vue';
import { getCurrentStep, setCurrentStep } from './util';

const _currentStep = getCurrentStep();
const currentStep = ref(_currentStep);

const components: any = {
  0: Step1,
  1: Step2,
  2: Step4,
  3: Step3,
};

const comp = computed(() => components[currentStep.value]);

function onNext(i: any) {
  currentStep.value = i;
  setCurrentStep(i);
}
</script>

<style lang="scss" scoped>
.wrapper-reg {
  background: linear-gradient(0deg, #f6f6f6, #eaf1fe);
  box-sizing: border-box;
  padding-top: 40px;
}
.reg-page {
  width: 1200px;
  margin: 0 auto;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;

  .reg-content {
    width: 100%;
    margin-top: 80px;
    min-height: 80vh;
    :deep(.reg-title) {
      font-size: 16px;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 16px;

      div {
        &:nth-child(2) {
          font-size: 14px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 14px;
          margin-top: 20px;
          padding-left: 20px;
        }
      }

      .big {
        font-size: 28px;
        font-family: AlibabaPuHuiTiH;
        color: #1890ff;
        line-height: 28px;
        margin-right: 8px;
      }
    }
  }
}
</style>
